<template>
  <div class="approval-process">
    <div class="approval-process-cells">
      <template v-for="(item, idx) in approvers">
        <span v-if="idx > 0" class="item-tag-icon">
          <el-icon><Right /></el-icon>
        </span>
        <ApprovalProcessStepsItem2 v-model="value[idx]" :default-text="item.value" :list-type="item.key" />
      </template>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watch, computed, onMounted } from 'vue'
import { Right } from '@element-plus/icons-vue'
import ApprovalProcessStepsItem2 from './ApprovalProcessStepsItem2.vue'

const props = defineProps({
  days: {
    type: Number,
    default: 0,
  },
  modelValue: {
    type: Array,
    default: () => [],
  },
  startWorkTime: {
    type: String,
    default: '',
  },
  userIdentity: {
    // 0：普通员工 / 1：普通员工（动画组/北京动画组）/ 2：主管及以上
    type: Number,
    default: -1,
  },
})
// const tempValue = ref<any[]>([])
const emit = defineEmits(['update:modelValue'])
const value = ref<any[]>(props.modelValue)

// 何振辉
const value4 = ref<any>({
  disabled: false,
  id: 113,
  nickName: '何振辉',
  text: '何振辉',
  userId: 113,
  userName: 'fai',
})

// 曲嘉元
const value5 = ref<any>({
  disabled: false,
  id: 115,
  nickName: '曲嘉元',
  text: '曲嘉元',
  userId: 115,
  userName: 'qujiayuan',
})

// 谭焕臣
const value6 = ref<any>({
  disabled: false,
  id: 257,
  nickName: '谭焕臣',
  text: '谭焕臣',
  userId: 257,
  userName: 'tanhuanchen',
})
// 审批人角色映射表
const approverRoles: any = {
  1: '主管',
  2: '总监',
  3: '制片',
  4: '经理',
  5: '总经理',
}

// 审批人列表配置
const approverConfig: any = {
  // 长春
  // 导演 101
  101: {
    '<=2': [3, 5],
    '>2': [3, 5],
    '2-5': [3, 5],
    '>=5': [3, 5],
  },
  // 制片 102
  102: {
    '<=2': [3, 5],
    '>2': [3, 5],
    '2-5': [3, 5],
    '>=5': [3, 5],
  },
  // 主管 103
  103: {
    '<=2': [3, 4],
    '>2': [3, 4, 5],
    '2-5': [3, 4, 5],
    '>=5': [3, 4, 5],
  },
  // 总监 104
  104: {
    '<=2': [3, 4],
    '>2': [3, 4, 5],
    '2-5': [3, 4, 5],
    '>=5': [3, 4, 5],
  },
  // 普通员工 105
  105: {
    '<=2': [1, 3],
    '2-5': [1, 3, 4],
    '>=5': [1, 3, 4, 5],
  },
  // 普通员工（动画） 106
  106: {
    '<=2': [1, 2, 3],
    '2-5': [1, 2, 3, 4],
    '>=5': [1, 2, 3, 4, 5],
  },
  // 副总
  107: {
    '<=2': [1, 3],
    '2-5': [1, 3, 5],
    '>=5': [1, 3, 5],
  },
  108: {
    // 普通员工 长春 故事版组
    '<=2': [1, 3],
    '2-5': [1, 3, 5],
    '>=5': [1, 3, 5],
  },
  109: {
    // 普通员工 长春 概念设计组
    '<=2': [1, 3],
    '2-5': [1, 3, 5],
    '>=5': [1, 3, 5],
  },
  112: {
    // 行政
    '<=2': [5],
    '2-5': [5],
    '>=5': [5],
  },

  // 北京
  // 导演 201
  201: {
    '<=2': [3, 5],
    '>2': [3, 5],
  },
  // 制片 202
  202: {
    '<=2': [3, 5],
    '>2': [3, 5],
  },
  // 主管 203
  203: {
    '<=2': [3, 5],
    '>2': [3, 5],
    '2-5': [3, 5],
    '>=5': [3, 5],
  },
  // 总监 204
  204: {
    '<=2': [3, 5],
    '>2': [3, 5],
    '2-5': [3, 5],
    '>=5': [3, 5],
  },
  // 普通员工 205
  205: {
    '<=2': [3, 4],
    '2-5': [3, 4],
    '>=5': [3, 4, 5],
  },
  207: {
    '<=2': [5],
    '2-5': [5],
    '>=5': [5],
  },
}
// 计算属性：获取审批人列表
const approvers = computed(() => getApprovers(props.userIdentity, props.days))

const isChangChun = computed(() => props.startWorkTime == '08:00')

// 监听 value 的变化，触发 update:modelValue 事件
watch(
  () => value.value,
  (val) => {
    emit('update:modelValue', val)
  },
  {
    deep: true,
  }
)

// 监听 props.modelValue 的变化，更新 value
watch(
  () => props.modelValue,
  (newVal) => {
    value.value = newVal
    const val = approvers.value
    updateValue(val)
  }
)

// 监听 approvers 的变化，初始化 value
watch(
  () => approvers.value,
  (val: any) => {
    // 初始化 value
    value.value = []
    updateValue(val)
  },
  {
    deep: true,
  }
)

// 初始化 value
onMounted(async () => {
  const val = approvers.value
  updateValue(val)
})

/**
 * 更新值函数
 *
 * @param val 输入的数组，数组中的每个元素都是一个对象，包含 key 属性
 */
function updateValue(val: any) {
  for (let i = 0; i < val.length; i++) {
    if (val[i].key < 4) {
      if (val[i].key == 1 && (props.userIdentity == 108 || props.userIdentity == 109)) {
        value.value[i] = value6.value
      } else {
        value.value[i] = null
      }
    } else if (val[i].key == 4) {
      value.value[i] = isChangChun ? value4.value : value5.value
    } else if (val[i].key == 5) {
      value.value[i] = value5.value
    }
  }
}

/**
 * 根据人员类型和请假天数获取审批人列表
 *
 * @param personType 人员类型 [0：普通员工 / 1：普通员工（动画组/北京动画组）/ 2：主管及以上]
 * @param leaveDays 请假天数
 * @returns 审批人列表
 */
function getApprovers(personType: number, leaveDays: number) {
  // 主管:1, 总监:2, 制片:3, 经理:4, 总经理:5
  const config = approverConfig[personType]
  if (!config) return []

  let key = ''
  if (leaveDays <= 2) key = '<=2'
  else if (leaveDays < 5) key = '2-5'
  else key = '>=5'

  const roles = config[key] || []

  return roles.map((role: any) => ({ key: role, value: approverRoles[role] }))
}
</script>
<style scoped lang="scss">
.approval-process-cells {
  display: flex;
  flex-wrap: wrap;
  .item-tag-icon {
    margin: 0 10px;
  }
}
</style>
